<template>
  <div class="app-container">
    <div class="panel-container">
      <div class="panel-item">
        <div class="panel-icon panel-icon-primary">
          <i class="el-icon-user-solid"></i>
        </div>
        <div class="panel-content">
          <div class="panel-title">用户总数</div>
          <div class="panel-value">{{ dashboardData.totalUserCount || 0 }}</div>
        </div>
      </div>
      <div class="panel-item">
        <div class="panel-icon panel-icon-success">
          <i class="el-icon-circle-check-solid"></i>
        </div>
        <div class="panel-content">
          <div class="panel-title">活跃用户数</div>
          <div class="panel-value">{{ dashboardData.activeUserCount || 0 }}</div>
        </div>
      </div>
      <div class="panel-item">
        <div class="panel-icon panel-icon-warning">
          <i class="el-icon-chart-line"></i>
        </div>
        <div class="panel-content">
          <div class="panel-title">平均消费水平</div>
          <div class="panel-value">{{ dashboardData.avgConsumeLevel || 0 }}</div>
        </div>
      </div>
      <div class="panel-item">
        <div class="panel-icon panel-icon-danger">
          <i class="el-icon-attention-solid"></i>
        </div>
        <div class="panel-content">
          <div class="panel-title">待挽留用户数</div>
          <div class="panel-value">{{ dashboardData.retentionUserCount || 0 }}</div>
        </div>
      </div>
    </div>

    <div class="chart-container">
      <div class="chart-item">
        <div class="chart-header">
          <h3>业务品牌分布</h3>
        </div>
        <div class="chart-content">
          <div id="businessBrandChart"></div>
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-header">
          <h3>用户价值等级分布</h3>
        </div>
        <div class="chart-content">
          <div id="userValueChart"></div>
        </div>
      </div>
    </div>

    <div class="chart-container">
      <div class="chart-item">
        <div class="chart-header">
          <h3>电视消费水平分布</h3>
        </div>
        <div class="chart-content">
          <div id="tvConsumeChart"></div>
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-header">
          <h3>宽带消费水平分布</h3>
        </div>
        <div class="chart-content">
          <div id="broadbandConsumeChart"></div>
        </div>
      </div>
    </div>

    <div class="chart-container full-width">
      <div class="chart-item full-width">
        <div class="chart-header">
          <h3>用户增长趋势</h3>
        </div>
        <div class="chart-content">
          <div id="userGrowthChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDashboardData } from '@/api/media/dashboard'

export default {
  name: 'MediaDashboard',
  data() {
    return {
      dashboardData: {
        totalUserCount: 0,
        activeUserCount: 0,
        avgConsumeLevel: 0,
        retentionUserCount: 0,
        businessBrandDistribution: [],
        userValueLevelDistribution: [],
        tvConsumeLevelDistribution: [],
        broadbandConsumeLevelDistribution: [],
        userGrowthTrend: []
      },
      charts: {}
    }
  },
  mounted() {
    this.loadDashboardData()
    this.$nextTick(() => {
      this.initCharts()
      this.windowResizeHandler = () => {
        this.resizeCharts()
      }
      window.addEventListener('resize', this.windowResizeHandler)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResizeHandler)
    this.destroyCharts()
  },
  methods: {
    /** 加载仪表盘数据 */
    loadDashboardData() {
      getDashboardData().then(res => {
        this.dashboardData = res.data
        this.updateCharts()
      })
    },
    
    /** 初始化图表 */
    initCharts() {
      this.charts.businessBrandChart = echarts.init(document.getElementById('businessBrandChart'))
      this.charts.userValueChart = echarts.init(document.getElementById('userValueChart'))
      this.charts.tvConsumeChart = echarts.init(document.getElementById('tvConsumeChart'))
      this.charts.broadbandConsumeChart = echarts.init(document.getElementById('broadbandConsumeChart'))
      this.charts.userGrowthChart = echarts.init(document.getElementById('userGrowthChart'))
      
      this.updateCharts()
    },
    
    /** 更新图表数据 */
    updateCharts() {
      this.updateBusinessBrandChart()
      this.updateUserValueChart()
      this.updateTvConsumeChart()
      this.updateBroadbandConsumeChart()
      this.updateUserGrowthChart()
    },
    
    /** 更新业务品牌分布图表 */
    updateBusinessBrandChart() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} \n{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.dashboardData.businessBrandDistribution.map(item => item.name)
        },
        series: [
          {
            name: '业务品牌',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.dashboardData.businessBrandDistribution,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.charts.businessBrandChart.setOption(option)
    },
    
    /** 更新用户价值等级分布图表 */
    updateUserValueChart() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} \n{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.dashboardData.userValueLevelDistribution.map(item => item.name)
        },
        series: [
          {
            name: '用户价值等级',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.dashboardData.userValueLevelDistribution,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.charts.userValueChart.setOption(option)
    },
    
    /** 更新电视消费水平分布图表 */
    updateTvConsumeChart() {
      const data = this.dashboardData.tvConsumeLevelDistribution
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.map(item => item.value),
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      this.charts.tvConsumeChart.setOption(option)
    },
    
    /** 更新宽带消费水平分布图表 */
    updateBroadbandConsumeChart() {
      const data = this.dashboardData.broadbandConsumeLevelDistribution
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.map(item => item.value),
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fbc2eb' },
                { offset: 0.5, color: '#a18cd1' },
                { offset: 1, color: '#a18cd1' }
              ])
            }
          }
        ]
      }
      this.charts.broadbandConsumeChart.setOption(option)
    },
    
    /** 更新用户增长趋势图表 */
    updateUserGrowthChart() {
      const data = this.dashboardData.userGrowthTrend
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新增用户', '活跃用户']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增用户',
            type: 'line',
            stack: '总量',
            data: data.map(item => item.newUserCount),
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
            name: '活跃用户',
            type: 'line',
            stack: '总量',
            data: data.map(item => item.activeUserCount),
            itemStyle: {
              color: '#91cc75'
            }
          }
        ]
      }
      this.charts.userGrowthChart.setOption(option)
    },
    
    /** 调整图表大小 */
    resizeCharts() {
      Object.values(this.charts).forEach(chart => {
        chart.resize()
      })
    },
    
    /** 销毁图表 */
    destroyCharts() {
      Object.values(this.charts).forEach(chart => {
        chart.dispose()
      })
    }
  }
}
</script>

<style scoped>
.panel-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.panel-item {
  flex: 1;
  min-width: 250px;
  height: 120px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.panel-item:last-child {
  margin-right: 0;
}

.panel-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 20px;
}

.panel-icon-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.panel-icon-success {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
  color: #fff;
}

.panel-icon-warning {
  background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%);
  color: #fff;
}

.panel-icon-danger {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
  color: #fff;
}

.panel-content {
  flex: 1;
}

.panel-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.panel-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.chart-container.full-width {
  flex-direction: column;
}

.chart-item {
  flex: 1;
  min-width: 450px;
  height: 350px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.chart-item:last-child {
  margin-right: 0;
}

.chart-item.full-width {
  width: 100%;
  min-width: auto;
}

.chart-header {
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.chart-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.chart-content {
  height: calc(100% - 55px);
  width: 100%;
}

#businessBrandChart,
#userValueChart,
#tvConsumeChart,
#broadbandConsumeChart,
#userGrowthChart {
  width: 100%;
  height: 100%;
}

@media (max-width: 1200px) {
  .panel-item {
    min-width: calc(50% - 10px);
  }
  
  .chart-item {
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .panel-item {
    min-width: 100%;
    margin-right: 0;
  }
  
  .chart-item {
    min-width: 100%;
    margin-right: 0;
  }
}
</style>